import window from '@/electronChange/windwos';
import store from '@/store';
import { observer } from 'mobx-react-lite';
import React from 'react';
import styled from 'styled-components';
import ReactTooltip from 'react-tooltip';
const IndexLayout = styled.div`
  min-height: 1.8rem;
  max-height: 1.8rem;
  background-color: #141414;
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  -webkit-app-region: drag;
`;
const LastLayout = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
`;
const Button = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 100%;
  -webkit-app-region: no-drag;
  :hover {
    cursor: pointer;
    background-color: #5a728a;
    -webkit-app-region: no-drag;
  }
`;
/* CSS */
const AButton = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 100%;
  -webkit-app-region: no-drag;
  :hover {
    cursor: pointer;
    background-color: #ff1d1d;
    -webkit-app-region: no-drag;
  }
`;

const CloseButton = styled(AButton)``;
const MinButton = styled(Button)``;
const MaxMinButton = styled(Button)``;
const MinMaxButton = styled(Button)``;
const SetConfigButton = styled(Button)``;
const TitleText = styled.div`
  color: #ffffff;
  font-size: 1.2rem;
  text-align: center;
  user-select: none;
`;

//css
const icon = {
  width: '1em',
  height: '1em',
  verticalAlign: '-0.15em',
  fill: '#F7F7F7',
  overflow: 'hidden',
  display: 'flex',
  justifyContent: 'center',
};
const Title: React.FC = observer(() => {
  const buttonCLick = (value: number) => {
    switch (value) {
      case 0: {
        //min
        window.snedWindowsMin();
        break;
      }
      case 1: {
        //min-max
        window.snedWindowsMinMax();
        break;
      }
      case 2: {
        //max-min
        window.sendWindowsMaxMin();
        break;
      }
      case 3: {
        //close
        window.sendWindowsClose();
        break;
      }
    }
  };

  return (
    <IndexLayout>
      <div></div>
      <div>
        <TitleText>mod汉化工具</TitleText>
      </div>
      <LastLayout>
        <SetConfigButton data-tip='设置' onClick={() => {}}>
          <svg style={icon} aria-hidden={true}>
            <use xlinkHref='#icon-chilun'></use>
          </svg>
        </SetConfigButton>
        <ReactTooltip
          delayShow={1500}
          place='bottom'
          type='dark'
          effect='solid'
        />
        <MinButton
          data-tip='最小化'
          onClick={() => {
            buttonCLick(0);
          }}
        >
          <svg style={icon} aria-hidden={true}>
            <use xlinkHref='#icon-zuixiaohua1'></use>
          </svg>
        </MinButton>
        {store.test.hide ? (
          <MaxMinButton
            data-tip='最大化'
            onClick={() => {
              buttonCLick(1);
            }}
          >
            <svg style={icon} aria-hidden={true}>
              <use xlinkHref='#icon-zuidahua'></use>
            </svg>
            <ReactTooltip
              delayShow={500}
              place='bottom'
              type='dark'
              effect='solid'
            />
          </MaxMinButton>
        ) : (
          <MinMaxButton
            data-tip='窗口化'
            onClick={() => {
              buttonCLick(2);
            }}
          >
            <svg style={icon} aria-hidden={true}>
              <use xlinkHref='#icon-zuixiaohua'></use>
            </svg>
            <ReactTooltip
              delayShow={500}
              place='bottom'
              type='dark'
              effect='solid'
            />
          </MinMaxButton>
        )}

        <CloseButton
          data-tip
          data-for='sadFace'
          onClick={() => {
            buttonCLick(3);
          }}
        >
          <svg style={icon} aria-hidden={true}>
            <use xlinkHref='#icon-guanbi'></use>
          </svg>
          <ReactTooltip
            delayShow={500}
            place='bottom'
            id='sadFace'
            type='error'
            effect='solid'
            backgroundColor='#ff0909'
          >
            <span>关闭</span>
          </ReactTooltip>
        </CloseButton>
      </LastLayout>
    </IndexLayout>
  );
});

export default React.memo(Title);
